<template>
	<view class="g-select">
		<view class="text-box" @click="clickTextWrap">
			<text :class="electionClass" v-show="result != ''">{{ result }}</text>
			<text :class="placeholderClass" v-show="result == ''">{{ placeholder }}</text>
		</view>
		<g-mask :visible.sync="maskShow">
			<template slot="content">
				<view class="g-select-box" @click.self="clickMask">
					<view :class="isShow ? 'g-select-show' : 'g-select-hide'">
						<view class="top-nav">
							<view class="top-nav-cancel" @click.self="handleCancel">取消</view>
							<view class="search-box" v-if="filterable">
								<g-input v-model="searchVal" clearable @confirm ='conirmSearch'></g-input>
							</view>
							<view class="top-nav-confirm" @click.self="handleConfirm">确定</view>
						</view>
						<picker-view indicator-class="indicator" class="picker-view" @change="changeScrol" v-show="selOption.length!=0">
							<picker-view-column>
								<view class="item" v-for="(item, index) in selOption" :key="index">{{ item[props.label] }}</view>
							</picker-view-column>
						</picker-view>
						<view v-show="selOption.length==0" class="emptyData">
							<i class="iconfont icon-zanwushuju1 icon"></i>
							<view>暂无数据</view>
						</view>
					</view>
				</view>
			</template>
		</g-mask>
	</view>
</template>
<script>
export default {
	data() {
		return {
			isShow: false,
			maskShow: false,
			result: '', //已选择的label
			selOption:null,
			choicedVal: '', //已选择的val
			hasChoicedIndex: 0 ,//已经滚动到的选项
			searchVal:'',
		};
	},
	props: {
		value: '',
		//数据
		tranOption: {
			type: Array
		},
		//默认选项
		placeholder: {
			default: '请选择名字'
		}, 
		//显示的value值的样式
		electionClass: {
			default: 'myElection'
		},
		//显示的placeholder的样式
		placeholderClass: {
			default: 'placeholder'
		},
		//点击遮罩是否关闭
		maskClick: {
			type: Boolean,
			default: false
		},
		//是否带搜索功能
		filterable:{
			type:Boolean,
			default:false
		},
		//配置tranOption的key,value值
		props: {
			type: Object,
			default: () => {
				return {
					value: 'value',
					label: 'label'
				};
			}
		}
	},
	methods: {
		//输入框逻辑
		conirmSearch(){
			//键盘的确认搜索
			let cloneData = JSON.parse(JSON.stringify(this.selOption))
			let emptyArr = []
			for (let i = 0; i < cloneData.length; i++) {
				if(cloneData[i][this.props.label].indexOf(this.searchVal)!=-1){
					emptyArr.push(cloneData[i])
				}
			}
			this.selOption = emptyArr
		},
		
		changeScrol(e) {
			//滚动选择
			this.hasChoicedIndex = e.detail.value[0];
		},
		clickTextWrap() {
			//点击文字
			this.maskShow = true;
			this.isShow = true;
		},
		clickMask() {
			//点击遮罩
			if (this.maskClick) {
				this.isShow = false;
			}
			this.$emit('clickMask')
		},
		handleCancel() {
			this.isShow = false;
			this.$emit("cancel")
		},
		handleConfirm() {
			//确认点击事件
			let choicedItem = this.selOption[this.hasChoicedIndex];
			this.result = choicedItem[this.props.label];
			this.choicedVal = choicedItem[this.props.value];
			this.isShow = false;
			this.$emit("comfirm")
		}
	},
	created() {
		this.choicedVal = this.value; //复制val
		this.selOption = this.tranOption
	},
	watch: {
		isShow() {
			if (!this.isShow) {
				//延迟关闭遮罩
				setTimeout(() => {
					this.maskShow = false;
				}, 250);
			}
		},
		tranOption(n){
			this.selOption = n
		},
		choicedVal(n, o) {
			let filterArr = this.selOption.filter(item => item[this.props.value] == n);
			if (filterArr.length != 0) {
				this.result = filterArr[0][this.props.label];
			}
			this.$emit('change',n)
			this.$emit('input', n);
		},
		value(n, o) {
			this.choicedVal = n; //复制val
		},
		searchVal(n,o){
			if(n.length==0||n==null){
				this.selOption = this.tranOption
			}else{
				this.conirmSearch()
			}
		},
	}
};
</script>
<style scoped lang="scss">
@import '../../theme.scss';
	@import "../../iconfont.css";
	.g-select{
		display: inline-block;
	}
.search-box{
}
.text-box {
	display: inline-block;
}
.placeholder {
	font-size: 24rpx;
	color: $g-text-dark;
}
.myElection {
	font-size: 24rpx;
	color: $g-text-darker;
}
.g-select-box {
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
	height: 100%;
}
.g-select {
	@keyframes showSelect {
		0% {
			transform: translateY(700rpx);
		}
		100% {
			transform: translateY(0);
		}
	}
	&-show {
		background: #fff;
		border-radius: 32rpx 32rpx 0 0;
		width: 100%;
		overflow: hidden;
		animation: showSelect 0.3s linear;
	}
	&-hide {
		background: #fff;
		border-radius: 32rpx 32rpx 0 0;
		width: 100%;
		overflow: hidden;
		transition: 0.3s;
		transform: translateY(700rpx);
	}
}
.top-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0rpx 32rpx;
	height: 90rpx;
	border-bottom: 2rpx solid $g-boder-light;
	&-confirm {
		color: $g-main-primary;
	}
	&-cancel {
		color: $g-main-danger;
	}
}
.emptyData{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 600rpx;
	color: #dedede;
	.icon{
		font-size: 200rpx;
	}
}
.picker-view {
	width: 100%;
	height: 600rpx;
}
.indicator {
	height: 90rpx;
}
.item {
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
}
</style>
